<!-- 专业编辑 -->
<template>
  <div class="page-box h100 display-flex czbj au dfrtrwweertr">
    <div class="title-label">
      <span class="">{{isbj?'编辑':'添加'}}专业</span>
    </div>


    <div class="mt20 formsdrttw">
      <n-form ref="formRef" :rules="rules" :model="fromData" label-width="110" :inline="false" label-placement="left">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="12" label="专业名称:" path="name">
            <n-input v-model:value='fromData.name' type="text" placeholder="请输入专业名称" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="英文专业名称:" path="enNmae">
            <n-input v-model:value='fromData.enNmae' type="text" placeholder="请输入英文专业名称" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="专业介绍:" path="ProfessionalProfile">
            <n-input v-model:value='fromData.ProfessionalProfile' type="textarea" rows="6" placeholder="请输入英文专业名称"
              size="medium" clearable @change=""></n-input>

          </n-form-item-gi>
          <n-form-item-gi span="24" label="专业分支:" path="order_num">
            <n-dynamic-input v-model:value="SpecialtyBranch" :on-create="onCreate">
              <template #create-button-default>
                点击添加专业分支
              </template>
              <template #default="{ value }">
                <div class="w100">
                  <div class=" display-flex w100">
                    <n-input v-model:value="value.name" type="text" placeholder="请输入专业分支名称" size="medium" clearable
                      @change=""></n-input>
                    <n-input v-model:value="value.enName" type="text" placeholder="请输入英文专业分支" size="medium" clearable
                      @change="" class="ml10"></n-input>
                  </div>
                  <div class="mt10">
                    <n-input v-model:value="value.introduce" type="textarea" placeholder="请输入专业介绍" size="medium" clearable
                      @change=""></n-input>
                  </div>
                </div>
              </template>
            </n-dynamic-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="薪资岗位 :" path="order_num">
            <n-dynamic-input v-model:value="PayrollPosition" :on-create="onCreate">
              <template #create-button-default>
                点击添加薪资岗位
              </template>
              <template #default="{ value }">
                <div class="w100">
                  <div class=" display-flex w100">
                    <n-input v-model:value="value.name" type="text" placeholder="请输入薪资岗位名称" size="medium" clearable
                      @change=""></n-input>
                    <n-input v-model:value="value.enName" type="text" placeholder="请输入英文薪资岗位" size="medium" clearable
                      @change="" class="ml10"></n-input>
                    <n-input v-model:value="value.introduce" type="text" placeholder="请输入平均薪资" size="medium" clearable
                      @change="" class="ml10"></n-input>
                  </div>

                </div>
              </template>
            </n-dynamic-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="专业经典课程:" path="order_num">
            <n-dynamic-input v-model:value="specializedCourses" :on-create="onCreate">
              <template #create-button-default>
                点击添加专业经典课程
              </template>
              <template #default="{ value }">
                <div class="w100">
                  <div class=" display-flex w100">
                    <n-input v-model:value="value.name" type="text" placeholder="请输入专业经典课程名称" size="medium" clearable
                      @change=""></n-input>
                    <n-input v-model:value="value.enName" type="text" placeholder="请输入英文专业经典课程" size="medium" clearable
                      @change="" class="ml10"></n-input>
                  </div>
                </div>
              </template>
            </n-dynamic-input>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="是否为热门:" path="order_num">
            <n-switch v-model:value="HotNot" size="medium" class="mt5" />

          </n-form-item-gi>

        </n-grid>
      </n-form>
    </div>

    <div class="jkjnjmxertw  vertical-center">
      <div>
        <n-button  size="medium" @click="callBack">返回上一页</n-button>
        <n-button type="primary" size="medium" @click="addzy" class="ml20">{{isbj?'保存':'添加'}}专业</n-button>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost,qurl,dxget } from "../../util/index"
const formRef = ref()
const cz = qurl()
const isbj = ref(false)
const SpecialtyBranch = ref()
const PayrollPosition = ref()
const specializedCourses = ref()
const HotNot = ref(false)
const fromData = ref({
  name: "",
  enNmae: "",
  ProfessionalProfile: "",
  SpecialtyBranch: "",
  PayrollPosition: "",
  specializedCourses: "",

})

const onCreate = () => {
  return {
    name: "",
    enName: "",
    introduce: ""
  }
}

const rules = {
  name: {
    required: true,
    message: '请输入专业名称',
    trigger: 'blur'
  },
  enName: {
    required: true,
    message: '请输入英文专业名称',
    trigger: 'blur'
  },
  ProfessionalProfile: {
    required: true,
    message: '请输入专业简介',
    trigger: 'blur'
  },
}

const addzy = async () => {

  formRef.value.validate(async (errors) => {
    if (!errors) {
      if (!SpecialtyBranch.value) {
        window.$message.error("请输入专业分支")
        return
      }
      if (!PayrollPosition.value) {
        window.$message.error("请输入薪资岗位")
        return
      }
      if (!specializedCourses.value) {
        window.$message.error("请输入专业经典课程")
        return
      }
      fromData.value.SpecialtyBranch = JSON.stringify(SpecialtyBranch.value)
      fromData.value.PayrollPosition = JSON.stringify(PayrollPosition.value)
      fromData.value.specializedCourses = JSON.stringify(specializedCourses.value)
      if(HotNot.value){
        fromData.value.HotNot = 2
      }else{
        fromData.value.HotNot = 1
      }

      const { data }: any = await dxpost('studyAbroad/jfprofessionalManagement', fromData.value,isbj.value?'put':'post')
      window.$message.success("操作成功！")
      callBack()
    } else {
      console.log(errors);
    }
  });
}
const initData = async()=>{
  const { data }: any = await dxget("studyAbroad/jfprofessionalManagement", { id: cz.id})

  fromData.value = data

  try{
    SpecialtyBranch.value = JSON.parse(data.SpecialtyBranch)
  }catch(e){

  }
  try{
    PayrollPosition.value = JSON.parse(data.PayrollPosition)
  }catch(e){

  }
  try{
    specializedCourses.value = JSON.parse(data.specializedCourses)
  }catch(e){

  }
  if(data.HotNot==2){
    HotNot.value = true
  }else{
    HotNot.value = false
  }

}
if(cz.id){
  isbj.value = true
  initData()
}
</script>
<style scoped>
.formsdrttw {
  width: 1000px
}
.dfrtrwweertr{
    padding-bottom:100px
}
</style>